<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [nzWidth]="1400"
  [(nzVisible)]="isViewVisible"
  [nzTitle]="modalTitle"
  (nzOnCancel)="handleCancel()">

  <div *nzModalContent>
    <div class="custom-model-body">
      <div class="table-wrap">
        <nz-table
          #priviewTable
          nzSize="small"
          nzShowSizeChanger
          nzShowQuickJumper
          nzOuterBordered
          [nzScroll]="{ x: '1100px' }"
          [nzFrontPagination]="false"
          [nzLoadingDelay]="100"
          [nzLoading]="tableParams.loading"
          [nzData]="tableParams.tableData"
          [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
          [nzTotal]="tableParams.total"
          [nzPageIndex]="tableParams.page"
          [nzPageSize]="tableParams.pageSize"
          [nzShowTotal]="totalTemplate"
          (nzPageIndexChange)="onPageIndexChange($event)"
          (nzPageSizeChange)="onPageSizeChange($event)"
        >
          <thead>
            <tr>
              <th nzAlign="center" nzWidth="110px">机器编码</th>
              <th nzAlign="center">库位</th>
              <th nzAlign="center">状态</th>
              <th nzAlign="center">适用用户</th>
              <th nzAlign="center">成交价</th>
              <th nzAlign="center">B端售价</th>
              <th nzAlign="center">C端售价</th>
              <th nzAlign="center">品牌</th>
              <th nzAlign="center">型号</th>
              <th nzAlign="center">B端成色</th>
              <th nzAlign="center">C端成色</th>
              <th nzAlign="center">成交入库时间</th>
              <th nzAlign="center" *ngIf="!disable">操作</th>
            </tr>
          </thead>
  
          <tbody>
            <tr *ngFor="let data of priviewTable.data; let index = index;">
              <!-- 机器编码 -->
              <td nzAlign="center">{{ data.equipmentCode || '-' }}</td>
              <!-- 库位 -->
              <td nzAlign="center">{{ data.libraryName || '-' }}</td>
              <!-- 状态 -->
              <td nzAlign="center">
                <span [ngStyle]="{'color': data.status | sencondGoodStatus: 'color'}">
                  {{ data.status | sencondGoodStatus: 'label' }}
                </span>
              </td>
              <!-- 适用用户 -->
              <td nzAlign="center">
                <div [ngSwitch]="data.userType" class="tags-td">
                  <div *ngSwitchCase="0">
                    <nz-tag nzColor="default">不限</nz-tag>
                  </div>
                  <div *ngSwitchCase="1">
                    <nz-tag nzColor="success">C端</nz-tag>
                  </div>
                  <div *ngSwitchCase="2">
                    <nz-tag nzColor="processing">B端</nz-tag>
                  </div>
                  <div *ngSwitchDefault>-</div>
                </div>
              </td>
              <!-- 成交价 -->
              <td nzAlign="center">{{ (data.realValuation || 0) + (data.aprc || 0) }}</td>
              <!-- B端售价 -->
              <td nzAlign="center">{{ data.shopPriceB || '0' }}</td>
              <!-- C端售价 -->
              <td nzAlign="center">{{ data.shopPriceC || '0' }}</td>
              <!-- 品牌 -->
              <td nzAlign="center">{{ data.typeName || '-' }}</td>
              <!-- 型号 -->
              <td nzAlign="center">{{ data.modelName || '-' }}</td>
              <!-- B端成色 -->
              <td nzAlign="center">{{ data.colourNameB || '-' }}</td>
              <!-- C端成色 -->
              <td nzAlign="center">{{ data.colourName || '-' }}</td>
              <!-- 成交入库时间 -->
              <td nzAlign="center">{{ data.checkTime || '-' }}</td>
              <!-- 操作 -->
              <td nzAlign="center" *ngIf="!disable">
                <button
                  nz-button
                  nzSize="small"
                  nzType="link"
                  nzDanger
                  nz-popconfirm
                  nzPopconfirmTitle="确认删除?"
                  (nzOnConfirm)="deleteItem(data, index)"
                >删除</button>
              </td>
            </tr>
          </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
      </div>
    </div>
  </div>
</nz-modal>